<!-- 角色权限页面 -->

<style>
  .user_search{
     margin-top: 10px;
     margin-left: -10px;
     color: #2cb5ac;
  }
  .user_search:hover{
      cursor: pointer;
  }
  .form-check-input{

    margin-left: 50px;
  }
 span:hover{
    cursor: pointer;
  }
  .modal-title{
    font-size: 25px;
  }
  .modal2-span{
    font-size: 18px;
    margin-right: 20px;
    
  }
  .modal2-select{
    width: 150px;
    height: 30px;
  }
 
</style>

<div class="user_container">
  <div class="row">
  	<div class="col-md-1">
  		<button class="btn btn-default" type="submit" data-toggle="modal" data-target="#exampleModal">添加</button>
  	</div>
  	<div class="col-md-2">
  		 <input type="text" class="form-control user_search_text" id="exampleInputName2" placeholder="请输入用户名">
  	</div>
  	<div class="col-md-2">
  		<select class="form-control user_search_text">
        <option  class="val" disabled selected hidden>请选择角色</option>
		       <!-- <option>请输入用户角色</option> -->
		  </select>
  	</div>
  	<div class="col-md-1 user_search">
  		搜索
  	</div>
  </div>
  <div class="row">
  	<table class="table table-hover">
	 	<thead>
	 		<th>序号</th>
	 		<th>用户名</th>
	 		<th>姓名</th>
	 		<th>角色</th>
	 		<th>性别</th>
	 		<th>状态</th>
	 		<th>手机号</th>
	 		<th>操作</th>
	 	</thead>
	 	<tbody>
	 		<tr>
	 			<!-- <td>1</td>
	 			<td>usernaem</td>
	 			<td>name</td>
	 			<td>role</td>
	 			<td>gender</td>
	 			<td>status</td>
	 			<td>18777772222</td>
	 			<td>
	 			 -->
	 			</td>
	 		</tr>
	 		
	 	</tbody>
	</table>
  </div>
  <div class="row button">
  	<nav aria-label="Page navigation">
	  <ul class="pagination">
	    <li class="num">
	      <a href="#" aria-label="Previous">
	        <span aria-hidden="true">&laquo;</span>
	      </a>
	    </li >
    
      <li class="button-num"><a href="#">1</a></li>
      <li class="button-num"><a href="#">2</a></li>
      <li class="button-num"><a href="#">3</a></li>
      <li class="button-num"><a href="#">4</a></li>
     
    	<!-- <li><a href="#">5</a></li> -->
	    <li class="afternum">
	      <a href="#" aria-label="Next">
	        <span aria-hidden="true">&raquo;</span>
	      </a>
	    </li>
	  </ul>
	</nav>
  </div>
</div>


<!-- 模态框 -->


<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">添加用户</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="col-form-label">用户名</label>
            <input type="text" class="form-control modal-input" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="recipient-name" class="col-form-label">姓名</label>
            <input type="text" class="form-control modal-input" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="recipient-name" class="col-form-label">密码</label>
            <input type="text" class="form-control modal-input" id="recipient-name">
          </div>
        <div class="form-group">
            <label for="recipient-name" class="col-form-label  ">性别&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              
                <input class="form-check-input  " type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
                <label class="form-check-label" for="inlineRadio1">男&nbsp;&nbsp;</label>
              
             
                <input class="form-check-input " type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
                <label class="form-check-label " for="inlineRadio2">女</label>
             
            </label>
            
          </div>

          <div class="form-group">
            <label for="recipient-name" class="col-form-label">手机号</label>
            <input type="text" class="form-control modal-input" id="recipient-name111">
          </div>
          
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
</div>
 <!-- 模态框2 -->

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">设置角色</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div>
          <span class="modal2-span">用户名</span>
          <span class="modal2-span22">innerHtml</span>
        </div>
          <span class="modal2-span">角&nbsp;&nbsp;&nbsp;&nbsp;色</span>
          <select class="modal2-select">
            <option >管理员</option>
            <option>学生</option>
            <option>教师</option>
          </select>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary-22">确定</button>
      </div>
    </div>
  </div>
</div>

<script>
  
  var baseUrl="http://182.92.164.74:8002"
  var currentPage=1;
  var pageSize=10;
  var username="";
  var rolename=""
  var id=""
  // var url="/baseUser/pageQuery?page="+currentPage+"&pageSize="+pageSize
  //给角色框请求数据
  $.ajax({
    url:baseUrl+"/role/findAll",
    type:"GET",
    headers:{
      "Authorization":sessionStorage.getItem("token")
    },
    success:function(data){
      var user=data.data
      user.forEach(function(item){
          $(".val").after(`<option>`+item.name+`</option>`)
      })
    }

  })
  //给按钮绑定事件 实现分页效果
  $(".button-num").click((event)=>{
    
       $("tbody").empty()
       currentPage=$(event.target).text()
      //  console.log(currentPage)
       findAllPage(currentPage,pageSize)
  })

  //给按钮绑定事件  实现向前翻页
   $(".num").click(function(){
          
           
           currentPage=+currentPage-1;
          //  console.log(currentPage)
          if(currentPage>0 && currentPage<4){
            // console.log(currentPage)
             $("tbody").empty()
            findAllPage(currentPage,pageSize)
          }else{
              $("tbody").empty()
              currentPage=4
              findAllPage(currentPage,pageSize)
          }
          
   })

   //给按钮绑定事件  实现向后翻页
   $(".afternum").click(function(){
          
           
          currentPage=+currentPage+1;
         //  console.log(currentPage)
         if(currentPage>0 && currentPage<=4){
          //  console.log(currentPage)
            $("tbody").empty()
           findAllPage(currentPage,pageSize)
         }else{
             $("tbody").empty()
             currentPage=1
             findAllPage(currentPage,pageSize)
         }
         
  })

  //使用分页请求所有用户信息
  function findAllPage(){
    var url=baseUrl+"/baseUser/pageQuery?page="+currentPage+"&pageSize="+pageSize;
        if(username=="" && rolename==""){
          url=baseUrl+"/baseUser/pageQuery?page="+currentPage+"&pageSize="+pageSize
        }else{
          url=baseUrl+"/baseUser/pageQuery?page="+currentPage+"&pageSize="+pageSize+"&username="+username+"&rolename="+rolename
        }
      
      $.ajax({
        url:url,
        type:"GET",
        headers:{
          "Authorization":sessionStorage.getItem("token")
        },
        success:function(data){
          var user=data.data.list;
          
          user.forEach((item,index)=>{
            var role=item.roles[0]
            
            if(role==undefined){
                role=""
            }else{
              role=item.roles[0].name
            }
            $("tbody").append(`
              <tr>
                  <td>`+item.id+`</td>
                  <td>`+item.username+`</td>
                  <td>`+item.realname+`</td>
                  <td>`+role+`</td>
                  <td>`+item.gender+`</td>
                  <td>`+item.status+`</td>
                  <td>`+item.telephone+`</td>
                  <td>
                      <span data-toggle="modal" data-target="#staticBackdrop" class="set">设置</span>
                      <span class="delete">移出</span>
                      <span class="detail">详情</span>
                      <span  class="change">修改</span>
                  </td>
              
              </tr>
            `)
            
          })

          // //循环添加按钮
          // console.log(data)
          // var num=Math.ceil(data.data.total/pageSize)
          // console.log(num)
          // for(var i=num;i>0;i--){
          //   $(".num").after(`<li class="button-num"><a href="#">`+i+`</a></li>`)
          // }
        }

      })

      


  }


  //给移出按钮绑定事件
  $("tbody").on("click",".delete",function(event){
                      // event.preventDefault()
                      //  event.stopPropagation()
                        var id=$(event.currentTarget).parents("tr").children().eq(0).text()
                        // console.log(id)

                        // console.log($(this))
                        $.ajax({
                          url:"http://182.92.164.74:8002/baseUser/deleteById?id="+id,
                          type:"GET",
                          headers:{
                            "Authorization":sessionStorage.getItem("token")
                          },
                          success:function(data){

                            // console.log(data)
                              alert("删除成功")
                              //刷新页面  清空页面
                              username="";
                              rolename=""
                              $("tbody").empty()
                              // console.log(currentPage,pageSize)
                              findAllPage("currentPage","pageSize")
                          }
                        })
                  })
  findAllPage(currentPage,pageSize)
  
  //给搜索按钮绑定事件

   $(".user_search").click(()=>{
        username=$("input").val();
        rolename=$("select").val()
        if(rolename=="请输入用户角色"){
          rolename=""
        }
        $("tbody").empty()
    findAllPage(currentPage,pageSize,username,rolename)
   })
  
 //给保存按钮绑定事件 并封装
      $(".btn-primary").click((event)=>{

       
        
        //获取模态框中的数据
        var gender="男"
        
        if($("input:radio:checked").val()=="option1"){
            gender="male"
          
        }else if($("input:radio:checked").val()=="option2"){
          
          gender="female"
        }

        var username=$(".modal-input").eq(0).val()
        var realname=$(".modal-input").eq(1).val()
        var password=$(".modal-input").eq(2).val()
        var gender=gender
        var telephone=$("#recipient-name111").val()
        var role=$(".modal2-select").val()
         //判断id是否为空  从而判断是添加还是修改
        if(id==""){
          var obj={
            username:username,
            realname:realname,
            password:password,
            gender:gender,
            telephone:telephone,
          }
        }else {

          var obj={
            username:username,
            realname:realname,
            password:password,
            gender:gender,
            telephone:telephone,
            id:id
          }
        }
        //  console.log(username,realname,password,gender,telephone)
        // console.log(obj)

        //发送请求添加数据
        $.ajax({
          url:"http://182.92.164.74:8002/baseUser/saveOrUpdate",
          type:"POST",
          data:obj,
          headers:{
            "Authorization":sessionStorage.getItem("token")
          },
          success:function(data){
                //关闭模态框 刷新页面
                // console.log(data)
                $("#exampleModal").modal("hide")
                // username="";
                // rolename="";
                $("tbody").empty()
                findAllPage("currentPage","pageSize")     

          }

        })   
      })
 
//给修改按钮绑定事件

$("tbody").on("click",".change",(event)=>{
   //获取当前行数据
   
  $("#exampleModal").modal("show")  
   id=$(event.currentTarget).parents("tr").children().eq(0).text()
   var username=$(event.currentTarget).parents("tr").children().eq(1).text()
   var realname=$(event.currentTarget).parents("tr").children().eq(2).text()
   var password=123321;
   var gender=$(event.currentTarget).parents("tr").children().eq(4).text()
   var telephone=$(event.currentTarget).parents("tr").children().eq(6).text()
  //  console.log(username,realname,password,gender,telephone)

   //将数据放到模态框中
   $(".modal-title").text("修改用户")
   $("#exampleModal input").eq(0).val(username)
   $("#exampleModal input").eq(1).val(realname)
   $("#exampleModal input").eq(2).val(password)
   $("#inlineRadio1").attr("checked","checked")

   //清空所有选中按钮
 
   if(gender=="male"){
     $("#inlineRadio1").prop("checked","checked")
   }else{
    $("#inlineRadio2").prop("checked","checked")
   }

   $("#exampleModal input").eq(5).val(telephone)
})


//给添加按钮绑定事件
 $(".btn-default").click(()=>{
   $(".modal-input").val("")
   $("input:radio:checked").prop("checked",false)
  //  $("#inlineRadio2:checked").attr("checked",false)
 })

 //给详情按钮绑定事件

 $("tbody").on("click",".detail",function(){
  $(".content-main").load('./pages/user.html');
 })

 //给设置按钮绑定事件
 $("tbody").on("click",".set",function(event){
   //获取用户名和角色
   var username=$(event.currentTarget).parents("tr").children().eq(1).text()
   var role=$(event.currentTarget).parents("tr").children().eq(3).text()
   id=$(event.currentTarget).parents("tr").children().eq(0).text()
   
   
   //将用户名和角色放入模态框
   $(".modal2-span22").text(username)
  
    $(".modal2-select").val(role)
 })
 </script>